<template>
    <div class="new-song-section">
        <div class="title-container">
            <h2>新歌推荐</h2>
            <span class="more-tag" @click="handleMoreClick">更多</span>
        </div>
        <div class="new-song-grid">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
const handleMoreClick = () => {
    // 跳转逻辑待定
    console.log('更多点击');
};
</script>

<style scoped>
.new-song-section {
    margin-top: 40px;
    margin-left: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.new-song-section h2 {
    color: white;
    margin-bottom: 20px;
    font-size: 26px;
    padding-left: 13px;
    white-space: nowrap;
    min-width: 200px;
}

.new-song-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 1200px;
    width: 1200px;
}
.title-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.more-tag {
    color: gray;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 16px;
    margin-left: 950px;
    margin-top: -15px;
}

.more-tag:hover {
    color: red;
}
</style>